// 提供一个能够显示cs-message组件的函数
// 这个函数将来：导入直接使用，也可以挂载在vue实例原型上
// import Message from 'Message.js' Message({type:'error',text:'提示文字'})
// this.$message({type:'error',text:'提示文字'})

import { createVNode,render } from 'vue'
import CsMessage from './cs-message.vue'

// DOM容器
const div = document.createElement('div')
div.setAttribute('class','cs-message-container')
document.body.appendChild(div)

// 定时器标识
let timer = null
export default ({ type , text }) => {
    // 渲染组件
    // 1. 导入消息提示组件
    // 2. 将消息提示组件编译为虚拟节点（dom节点）
    // createVNode(组件，属性对象(props))
    const vnode = createVNode(CsMessage,{type,text})
    // 3. 准备一个装载消息提示组件的容器
    // 4. 将虚拟节点渲染在容器中
    // render(虚拟节点，DOM容器)
    render(vnode,div)
    // 5. 3s后销毁组件
    clearTimeout(timer)
    timer = setTimeout(() => {
        render(null,div)
    },3000)
}